<template>
  <div class="app-container">
    <el-form ref="form" :model="memberInfo" :rules='memberRules' label-width="80px">
      <el-form-item label="用户名" prop="memberId">
        <el-input v-model="memberInfo.memberId"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="memberInfo.password"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="memberInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="memberInfo.phone"></el-input>
      </el-form-item>
      <el-form-item label="代理级别">
        <el-select v-model="memberInfo.grade" placeholder="请选择等级">
          <el-option label="D1 -- 10000.0" value="D1 -- 10000.0"></el-option>
          <el-option label="D2 -- 50000.0" value="D1 -- 50000.0"></el-option>
          <el-option label="D3 -- 100000.0" value="D1 -- 100000.0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="推荐人" prop="recommendId">
        <el-input v-model="memberInfo.recommendId"></el-input>
      </el-form-item>
      <el-form-item label="安置人" prop="settleId">
        <el-input v-model="memberInfo.settleId"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'add',
  data() {
    return {
      memberInfo: {
        memberId: '',
        password: '',
        name: '',
        phone: '',
        grade: '',
        recommendId: '',
        settleId: ''
      },
      memberRules: {
        memberId: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        recommendId: [
          { required: true, message: '请输入推荐人', trigger: 'blur' }
        ],
        settleId: [
          { required: true, message: '请输入安置人', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>
<style lang="scss" scoped>

.app-container{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 60px;
}
.el-form{
  min-width: 360px;
  align-self: center;
}
</style>
